<template>
  <el-card class="eventEditor">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item :title="items.message" :name="index" v-for="(items,index) in rules" :key="index">
        <div slot="title">
          {{items.props['value']}}
          <i @click="delectFunc(index)" class="header-icon el-icon-delete"></i>
        </div>
        <div size="mini" label-position="left" label-width="80px">
          <xdh-form size="small" :model="editItem[index].props" :footer="false" label-width="80px" @change="(val)=>{handleTableChangeExtend(val,index)}" :edits="true">
            <xdh-form-item v-for="(item, indexs) in extendTableFields" :key="indexs" v-bind="item" />
          </xdh-form>
        </div>
      </el-collapse-item>
    </el-collapse>

    <div class="addScriptWarp">
      <el-input v-model="messageKey" placeholder="请输入按钮名称"></el-input>
      <el-button type="primary" size="mini" @click="addEvent" :disabled="canAdd">添加按钮</el-button>
    </div>
  </el-card>
</template>
<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
.eventEditor {
  .addScriptWarp {
    display: flex;
    margin-top: 10px;

    .scriptselect {
      margin-right: 10px;
    }
  }
}
</style>

<script type="text/ecmascript-6">
/**
 * 数据编辑器，
 * 后续扩展接口访问支持
 */
import BaseComponent from '@/widgets/extend/BaseComponent'
// import attrFunction from './Function'
import rules from '@/widgets/helper/setting/rules'
import XdhForm from '@/widgets/xdh-form'
import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'
export default {
  mixins: [BaseComponent],
  name: 'ChildEditor',
  components: { XdhForm, XdhFormItem },
  props: {
    content: {
      type: Array
    },
    /**
     * 支持 空，array，object
     */
    type: {
      type: String
    },
    extendTableModel: {

    },
    extendTableFields: {

    },
    tableEditField: {

    }
  },
  watch: {
    content: {
      immediate: true,
      handler: function (params) {
        this.editItem = params;
        console.log(params, "321432143214321432143124123")
        // this.inContent = params
      }
    },
    rules: function (newVal) {
      console.log(newVal, 123)
    }
  },
  data: function () {
    return {
      editItem: [],
      activeNames: [0],
      messageKey: '',
      editType_flag: '',
    }
  },
  computed: {
    editType:{
      get(){
        if(this.$store.state.editType){
          this.editType_flag = this.$store.state.editType['flag']
          return this.$store.state.editType['type'] || "";
        }

      },
      set(){

      }
    },
    selectEvent() {
      return (this.eventList || []).filter(s => {
        return this.messageKey == s.value
      })[0]
    },
    canAdd: function (params) {
      var has = this.rules.find(val => {
        if (val.event == this.messageKey) {
          return true
        }
      })
      if (has) {
        return true
      } else {
        return false
      }
    },
    rules: {
      get() {
        console.log(this.extendTableModel, '________________________________________________________________')
        return this.editType == 'table' ? this.$store.state.tableEditField.children : this.$store.state.ButtonEditField.children || []
      },
      set(rules) {
        var Editsfields = this.editType=='table'? this.$store.state.tableEditField : this.$store.state.ButtonEditField;
        const newField = JSON.parse(JSON.stringify({
          ...Editsfields,
          children: rules
        }))
        if (this.editType == 'table') {
          this.$store.commit('updateTableField', newField)
        } else {
          // console.log(newField)
          this.$store.commit('updateButtonField', { field: newField, types: this.editType_flag })
        }

      }
    }
  },
  mounted: function () {
    console.log(this.rules, 567890);
  },
  methods: {
    cleanModel(model) {
      const m = {}
      Object.keys(model).forEach(key => {
        const val = model[key]
        if (typeof val !== 'undefined' && val !== '') {
          m[key] = val
        }
      })
      return m
    },

    handleTableChangeExtend(model, indexs) {
      console.log(model, '===========')
      const rule = this.cleanModel(model)
      const rules = [...this.rules]
      const index = rules.findIndex((item, index) => index === indexs)
      const newProps = JSON.parse(JSON.stringify({
        ...rules[indexs],
        props: rule
      }))
      rules.splice(index, 1, newProps)

      const newField = JSON.parse(JSON.stringify({
        ...this.tableEditField,
        children: rules
      }))
      if (!newField.depend) {
        delete newField.depend
        delete newField.dependValue
      }
      console.log(newField, '========================更新组件=========================')
      if (this.editType == 'table') {
        this.$store.commit('updateTableField', newField)
      } else {
        this.$store.commit('updateButtonField', { field: newField, types: this.editType_flag })
      }
    },
    handleChange(params) {
      console.log(params, 999090)
    },
    delectFunc(params) {
      var id = -1
      const rules = [...this.rules]
      rules.forEach((val, index) => {
        if (index == params) {
          id = index
        }
      })
      if (rules.length > 1) {
        rules.splice(id, 1);
        this.rules = rules;
      }

    },
    addEvent(params) {
      const rules = [...this.rules]
      if (this.messageKey) {
        const newProps = JSON.parse(JSON.stringify({
          type: 'button',
          labelWidth: '0px',
          props: {
            value: this.messageKey
          }
        }))
        console.log(newProps)
        rules.push(newProps)
        this.rules = rules;
        const index = this.rules.findIndex(item => item.message === this.messageKey);
        this.editItem[index] = { value: this.messageKey }

        this.messageKey = '';
      } else {
        this.$message.warning('请输入按钮名称')
        return false;
      }

    }
  }
}
</script>

